<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>定位</title>
	<style type="text/css">
	/*一般父级设置相对定位属性 下面的子级设置绝对定位属性 以它最近的父级为参照物   (相对定位是以原来的为值为参考点)   固定定位你参考可视的区域进行的*/
	*{
		margin: 0px;
		padding: 0px;
	}
	.box{
		width: 500px;
		height: 500px;
		background: #000;
		margin: 0px auto;
		position:relative;
		z-index: 0px
		
	}

	.box1{
		width: 200px;
		height: 200px;
		background: red;
		position: absolute;
		top:20px;
		left: 20px;
		/*z-index: 100;*/
	}
	.box2{
		width: 200px;
		height: 200px;
		background: blue;
		/*position: fixed;*/
		top:60px;
		left: 90px;
		/*z-index: 10;*/
	}

	</style>
</head>
<body>
	<div class="box">
	<div class="box1">111111111</div>
	<div class="box2">222222222</div>
	</div>
</body>
</html>